{extend name="base/common"}

{block name="style"}
<link rel="stylesheet" href="/static/datepicker/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="/static/iCheck/custom.css">
<link rel="stylesheet" href="/admin/css/chosen/chosen.css">
<style>
    .imggroup{
        display: flex;
    }
    .imggroup .file-box {
        width: 100px;
        height: 100px;
        border-radius: 8px;
        margin-right: 40px;
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    .imggroup .add-file {
        background: #f0f0f0;
        display: -webkit-flex;
        -webkit-justify-content: center;
        -webkit-align-items: center;
    }
    .file-box > p {
        width: 100%;
        white-space: nowrap;
        font-size: 14px;
        text-overflow: ellipsis;
        overflow: hidden;
        margin: 5px 0;
    }
    .file-box .icon-file {
        width: 60%;
    }
    .add-file > img {
        width: 40%;
        height: 40%;
    }
    .file-box .icon-del {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 0;
        right: 0;
    }
    .imgbox{
        height: 100px;
        width: 200px;
        margin-top: 5px;
        margin-bottom: 0;
    }
    .imgfile{
        height: 100px;
        width: 200px;
        position: absolute;
        top:0;
        opacity: 0;
    }
</style>
{/block}

{block name="page-header"}

{/block}

{block name="main"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="mail-box-header">
                <div class="pull-right tooltip-demo">
                    <a href="javascript:window.history.go(-1);" class="btn btn-white btn-sm"><i class="fa fa-reply"></i> 返回</a>
                </div>
                <h2>
                    上级来文 - {empty name="msg"}添加{else/}修改{/empty}
                </h2>
            </div>
            <div class="ibox-content all">
                <form id="form" class="form-horizontal" method="post">
                    <div class="form-group">
                        <div class="col-lg-1 text-right control-label">
                            <label>文件类型:</label>
                        </div>
                        <div class="col-lg-11">
                            {empty name="msg"}
                            <select class="form-control" name="type">
                                <option value="1">行政</option>
                                <option value="2">党建</option>
                                <option value="3">工会</option>
                                <option value="4">其它</option>
                            </select>
                            {else/}
                            <select class="form-control" name="type" disabled>
                                <option value="1"{eq name="$msg.type" value="1"}selected{/eq}>行政</option>
                                <option value="2"{eq name="$msg.type" value="2"}selected{/eq}>党建</option>
                                <option value="3"{eq name="$msg.type" value="3"}selected{/eq}>工会</option>
                                <option value="3"{eq name="$msg.type" value="4"}selected{/eq}>其它</option>
                            </select>
                            {/empty}
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-1 text-right control-label">
                            <label>标题:</label>
                        </div>
                        <div class="col-lg-11">
                            <input type="text" placeholder="请输入标题" class="form-control form_title" name="title" value="{$msg.title || default=''}">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-1 control-label">
                            <label>内容:</label>
                        </div>
                        <div class="col-lg-11">
                            <div class=" float-e-margins">
                                <div class="ibox-content no-padding borders">
                                    <script id="container" name="content" type="text/plain">{$msg.content || default=''}</script>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-1 text-right control-label">
                            <label>附件:</label>
                        </div>
                        <div class="col-lg-11">
                            <div class="imggroup">
                                {notempty name="$msg"}
                                {volist name="$msg.attachment_file" id="file"}
                                <div class="file-box my-file" pid="{$file.id}">
                                    <img src="/admin/images/file.png" class="icon-file"/>
                                    <p>{$file.name}</p>
                                    <img src="/admin/images/delete.png" class="icon-del"/>
                                </div>
                                {/volist}
                                {lt name="$msg.attachment_file|count" value="3"}
                                <div class="file-box add-file">
                                    <img src="/admin/images/add.png" />
                                </div>
                                {/lt}
                                {else/}
                                <div class="file-box add-file">
                                    <img src="/admin/images/add.png" />
                                </div>
                                {/notempty}
                            </div>
                            <form id="fileForm">
                                <input type="file" name="attachment" class="form-control form_title" id="file"
                                       accept="image/*，application/msword, application/vnd.ms-powerpoint, application/pdf, application/pdf, application/zip,application/x-zip,application/x-zip-compressed, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.openxmlformats-officedocument.presentationml.presentation, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                                       multiple
                                       style="display: none;"
                                >
                            </form>
                        </div>
                    </div>

                    <input type="hidden" name="id" value="{$msg.id || default=''}">
                    <div class="form-group" >
                        <div class="col-lg-11 col-lg-offset-1" style="padding-left: 0">
                            <button class="btn btn-primary submit-btn post-put" type="button" target-form="form-horizontal" >发布</button>
                            <a class="btn btn-default" href="javascript:window.history.go(-1);">返回</a>
                        </div>
                        <div class="selblo" style="clear: both;"></div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script src="/static/uploadify/jquery.uploadify.min.js"></script>
<script src="/static/iCheck/icheck.min.js"></script>
<script src="/static/ueditor/ueditor.config.js"></script>
<script src="/static/ueditor/ueditor.all.min.js"></script>
<script src="/admin/js/chosen.jquery.js"></script>
<script>
    $(function(){

        //    单选按钮
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green'
        });

        highlight_subnav("{:Url('News/communication')}");
        //上传文件
        $("input[name='attachment']").on("change",function(value){
            console.log(value.target.files)
            for(var i in value.target.files) {
                if(typeof value.target.files[i] != 'object') {
                    return;
                }
                console.log('次数：'+i)
                var size = (value.target.files[i].size / 1024 ).toFixed(2);
                console.log(size)
                if(size <= 102400){
                    var file = value.target.files[i];
                    console.log(file)
                    var formData = new FormData();
                    formData.append("file",file);
                    console.log(formData)
                    $.ajax({
                        type:"post",
                        url:"{:Url('File/upload')}",
                        data:formData,
                        // mimeType:"multipart/form-data",
                        processData: false,
                        contentType: false,
                        success:function(msg){
                            console.log(JSON.parse(msg));
                            var msg = $.parseJSON(msg);
                            if(msg.code == 1) {
                                var html = '<div class="file-box my-file" pid="'+msg.data.id+'">' +
                                    '<img src="/admin/images/file.png" class="icon-file"/>' +
                                    '<p>' + msg.data.name + '</p>' +
                                    '<img src="/admin/images/delete.png" class="icon-del"/>' +
                                    '</div>';
                                $(".add-file").before(html);
                                if($(".my-file").length == 3) {
                                    $(".add-file").hide();
                                }
                                // document.getElementById("formFile").reset();
                            }
                        }
                    });
                } else {
                    warning({msg:"您选择的文件超过100mb，请重新选择"});
                    return;
                }
            }
        });
        $(".imggroup").delegate('.icon-del','click',function () {

            var index = $(this).parent().index();
            $(this).parent().remove();
            $(".add-file").show();
        })
        var ue = UE.getEditor('container',{
            initialFrameHeight:300,
            scaleEnabled:true//设置不自动调整高度
        });
        $(".add-file").off('click').on('click',function () {
            $("#file").click();
        });
        //发布
        $(".post-put").off('click').on("click",function(){
            var it=$(this),
                file_array = []
            $(".imggroup").find(".my-file").each(function () {
                file_array.push($(this).attr('pid'));
            });
            console.log(file_array)
            var data = {
                id:$("input[name='id']").val(),
                type:$("select[name='type']").val(),
                title:$("input[name='title']").val(),
                content:ue.getContent(),
                attachment:file_array,
            };
            $.ajax({
                type:"post",
                url:$("#form").attr("action"),
                data:data,
                beforeSend: function(){
                    // Handle the beforeSend event
                    it.attr("disabled","true");
                },
                success:function(data){
                    if(data.code == 1){
                        if (data.url) {
                            updateAlert(data.msg + ' 页面即将自动跳转~','success');
                        }else{
                            updateAlert(data.msg ,'success');
                        }
                        it.prop('disabled','true');
                        it.prev().prop('disabled','true');
                        setTimeout(function(){
                            if (data.url) {
                                location.href=data.url;
                            } else {
                                location.reload();
                            }
                            it.removeAttr('disabled');
                            it.prev().removeAttr('disabled')
                        },2000);
                        it.attr("disabled","false");
                    } else {
                        updateAlert(data.msg, 'error');
                        it.attr('disabled','true');
                        it.prev().prop('disabled','true');
                        setTimeout(function(){
                            it.removeAttr('disabled');
                            it.prev().removeAttr('disabled')
                        },2000);
                    }
                }
            });
            return false;
        });
    })

</script>
{/block}
